<!--考试记录组件-->
<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <div class="paperTotal">
                    <div style="margin-top: 20px">
                        总题数: {{ paramForm.totalNum }} 题
                    </div>
                    <div>总分: {{ paramForm.totalScore }} 分</div>
                    <div>得分: {{ paramForm.result }} 分</div>
                </div>
                <div
                    v-for="(items, index) in paramForm.content"
                    :key="index"
                    class="questionData"
                >
                    <div>
                        <span>{{ items.desc }}</span>
                    </div>
                    <span>共 {{ items.num }} 题 得分 {{ items.score }} 分</span>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <div style="margin-top: 20px">
                        {{ paramForm.name }}
                    </div>
                </el-header>
                <el-main>
                    <div
                        v-for="(items, index) in paramForm.content"
                        :key="index"
                        class="questionData"
                    >
                        <div style="line-height: 50px;">
                            <el-input
                                v-model="items.desc"
                                placeholder="请输入内容"
                                style="margin-left: -450px;width: 200px"
                                disabled
                            ></el-input>
                            <span style="margin-left: 100px;">
                                {{ status[items.firstType] }}</span
                            >
                        </div>
                        <div class="table-data-box">
                            <el-table
                                ref="table"
                                v-loading="tableLoading"
                                border
                                :data="items.questions"
                                style="width: 100%;min-height:40em"
                                row-key="id"
                            >
                                <!--                                    <el-table-column-->
                                <!--                                        type="selection"-->
                                <!--                                        min-width="55">-->
                                <!--                                    </el-table-column>-->
                                <el-table-column prop="remark" label="试题内容">
                                    <template slot-scope="scope">
                                        <!--                                        {{scope.row}}-->
                                        <div>
                                            【题型】{{
                                                status[
                                                    scope.row.question.firstType
                                                ]
                                            }}
                                        </div>
                                        <div class="questionInfo">
                                            【题干】
                                            <p
                                                v-html="
                                                    scope.row.question.stem[0]
                                                        .vl
                                                "
                                            ></p>
                                        </div>

                                        <div
                                            v-if="
                                                status[
                                                    scope.row.question.firstType
                                                ] === '单选题' ||
                                                    status[
                                                        scope.row.question
                                                            .firstType
                                                    ] === '多选题'
                                            "
                                        >
                                            <div
                                                v-for="(item, index) in scope
                                                    .row.question.answer"
                                                :key="index"
                                                class="questionInfo"
                                            >
                                                {{ item.option }}、
                                                <p
                                                    v-html="item.content[0].vl"
                                                ></p>
                                            </div>
                                        </div>

                                        <div
                                            v-if="
                                                status[
                                                    scope.row.question.firstType
                                                ] === '单选题'
                                            "
                                            class="questionInfo"
                                        >
                                            正确答案：{{
                                                scope.row.question.rightAnswer
                                            }}
                                        </div>

                                        <div
                                            v-if="
                                                status[
                                                    scope.row.question.firstType
                                                ] === '多选题'
                                            "
                                            class="questionInfo"
                                        >
                                            正确答案：<span
                                                v-for="(item, index) in scope
                                                    .row.question.rightAnswer"
                                                :key="index"
                                                >{{ item }}</span
                                            >
                                        </div>

                                        <div
                                            v-if="
                                                status[
                                                    scope.row.question.firstType
                                                ] === '判断题'
                                            "
                                            class="questionInfo"
                                        >
                                            正确答案：<span
                                                v-for="(item, index) in scope
                                                    .row.question.rightAnswer"
                                                :key="index"
                                            >
                                                <span v-if="item === 1"
                                                    >对</span
                                                >
                                                <span v-else>错</span>
                                            </span>
                                        </div>

                                        <div
                                            v-if="
                                                status[
                                                    scope.row.question.firstType
                                                ] === '填空题'
                                            "
                                            class="questionInfo"
                                        >
                                            正确答案：
                                            <p
                                                v-for="(item, index) in scope
                                                    .row.question.rightAnswer"
                                                :key="index"
                                                v-html="item.vl[0].vl"
                                            ></p>
                                        </div>

                                        <div
                                            v-if="
                                                status[
                                                    scope.row.question.firstType
                                                ] === '简答题'
                                            "
                                            class="questionInfo"
                                        >
                                            正确答案：
                                            <p
                                                v-for="(item, index) in scope
                                                    .row.question.rightAnswer"
                                                :key="index"
                                                v-html="item.vl[0].vl"
                                            ></p>
                                        </div>

                                        <div class="questionInfo">
                                            <span>试题解析：</span>
                                            <p
                                                v-html="
                                                    scope.row.question
                                                        .answerDesc[0].vl
                                                "
                                            ></p>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="操作"
                                    width="200"
                                    align="center"
                                    fixed="right"
                                >
                                    <template slot-scope="scope">
                                        <div>
                                            得分:
                                            <el-input-number
                                                v-model="scope.row.realScore"
                                                :disabled="isDetail"
                                                style="margin-top: 10px;"
                                                :min="0"
                                                :max="scope.row.score"
                                                @change="changeNum"
                                            ></el-input-number>
                                        </div>
                                        <div>
                                            满分:<span
                                                style="margin-top: 10px;"
                                            >
                                                {{ scope.row.score }}</span
                                            >
                                        </div>
                                        <div>
                                            <div
                                                v-if="
                                                    status[
                                                        scope.row.question
                                                            .firstType
                                                    ] === '单选题'
                                                "
                                                class="questionInfo"
                                            >
                                                所选答案：{{
                                                    scope.row.realAnswer
                                                }}
                                            </div>

                                            <div
                                                v-if="
                                                    status[
                                                        scope.row.question
                                                            .firstType
                                                    ] === '多选题'
                                                "
                                                class="questionInfo"
                                            >
                                                所选答案：<span
                                                    v-for="(item,
                                                    index) in scope.row
                                                        .realAnswer"
                                                    :key="index"
                                                    >{{ item }}</span
                                                >
                                            </div>

                                            <div
                                                v-if="
                                                    status[
                                                        scope.row.question
                                                            .firstType
                                                    ] === '判断题'
                                                "
                                                class="questionInfo"
                                            >
                                                所选答案：<span>
                                                    <span
                                                        v-if="
                                                            scope.row
                                                                .realAnswer ===
                                                                1
                                                        "
                                                        >对</span
                                                    >
                                                    <span v-else>错</span>
                                                </span>
                                            </div>

                                            <div
                                                v-if="
                                                    status[
                                                        scope.row.question
                                                            .firstType
                                                    ] === '填空题'
                                                "
                                                class="questionInfo"
                                            >
                                                所选答案：
                                                <p
                                                    v-for="(item,
                                                    index) in scope.row
                                                        .realAnswer"
                                                    :key="index"
                                                    v-html="item.vl"
                                                ></p>
                                            </div>

                                            <div
                                                v-if="
                                                    status[
                                                        scope.row.question
                                                            .firstType
                                                    ] === '简答题'
                                                "
                                                class="questionInfo"
                                            >
                                                所选答案：
                                                <p
                                                    v-for="(item,
                                                    index) in scope.row
                                                        .realAnswer"
                                                    :key="index"
                                                    v-html="item.vl"
                                                ></p>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div style="margin-top: 10px; margin-left: 600px;">
                        <el-button :loading="submitFlag" @click="cancle"
                            >取 消
                        </el-button>
                        <el-button
                            v-show="!isDetail"
                            :loading="submitFlag"
                            type="primary"
                            @click="save('/exam/record/maxadmin-correct')"
                            >保 存
                        </el-button>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { beanCopy } from "@/utils";
import { fetchQuestionByIds, fetchQuestionByPaper } from "@/api/exam";
import { post, put } from "@/api/request";

export default {
    //试卷记录
    name: "PaperRecordComponent",
    components: {},
    mixins: [TablePage],
    props: {
        paramForm: {
            type: Object,
            default() {
                return {};
            }
        },
        isDetail: {
            type: Boolean,
            default() {
                return true;
            }
        }
    },
    data() {
        return {
            submitFlag: false,
            questions: [],
            question: {},
            questionDataList: [],
            hasDone: false
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionFirstType
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    created() {},
    mounted() {},
    methods: {
        search(queryData) {
            this.tableLoading = true;
            this.changeNum();
            this.tableLoading = false;
        },
        cancle() {
            this.$emit("recordUpdateEvent", false);
        },
        save(url) {
            if (this.hasDone) {
                this.$alert("请不要重复提交", "提示");
                return false;
            }
            this.submitFlag = true;
            this.dataToContent();
            put(url, this.paramForm)
                .then(res => {
                    this.hasDone = true;
                    this.$emit("recordUpdateEvent", true);
                })
                .finally(() => {
                    this.submitFlag = false;
                });
        },

        dataToContent() {
            this.paramForm.content.forEach(item => {
                if (item.questions.length > 0) {
                    item.questions.forEach(ll => {
                        delete ll.question;
                    });
                }
            });
        },

        getQuestionByid(id) {
            this.question = {};
            let obj = {};
            this.questions.forEach(item => {
                if (id === item.id) {
                    beanCopy(item, obj, true);
                    this.question = obj;
                    return;
                }
            });
        },
        changeNum() {
            let totalNum = 0;
            let totalScore = 0;
            let result = 0;
            this.paramForm.content.forEach(item => {
                totalNum += parseInt(item.questions.length);
                item.num = item.questions.length;
                let score = 0;
                item.questions.forEach(dd => {
                    totalScore += parseInt(dd.score);
                    result += parseInt(dd.realScore);
                    score += parseInt(dd.realScore);
                });
                item.score = score;
            });
            this.paramForm.totalNum = totalNum;
            this.paramForm.totalScore = totalScore;
            this.paramForm.result = result;
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    background: #fff;
    border-radius: 0.3em 0.3em 0 0;
    padding-bottom: 1em;
    padding-top: 1em;
    padding-left: 1em;
    margin-top: 16px;

    .container-content {
        padding-top: 12px;

        p {
            color: #909399;
            font-size: 15px;
            padding-top: 12px;
        }
    }

    .container-right {
        margin-left: 12px;
        margin-top: 2em;

        .r-img {
            max-width: 240px;
            max-height: 160px;
        }

        .r-btn {
            margin-top: 22px;
        }
    }
}

.table-search-box {
    padding-left: 17px;
    font-size: 16px;
}

.el-header {
    background-color: #fff;
    color: #333;
    text-align: center;
    height: 60px;
}

.el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
}

.questionData {
    background-color: #f5f7fa;
    margin-top: 10px;
}

body > .el-container {
    margin-bottom: 40px;
}

.paperTotal {
    background: aliceblue;
}
</style>
